import { useState } from "react";

function TestComponent() {
  const [name, setname] = useState("");
  const [count, setcount] = useState("");
  const [selter,setseleter]=useState(1)
  const [shipping,setshipping]=useState('')
  function NameChange(e) {
    setname(e.target.value);
  }
  function CountChange(e) {
    setcount(e.target.value);
  }
  function changeSelter(e){
    setseleter(e.target.value)
  }
  function changeShipping(e){
    setshipping(e.target.value)
  }
  return (
    <div>
      <input value={name} onChange={NameChange}></input>
      <p>Name{name}</p>
      <input value={count} onChange={CountChange} type="number"></input>
      <p>count{count}</p>
      <select value={selter} onChange={changeSelter}> 
            <option value={1}>aa</option>
            <option value={2}>bb</option>
            <option value={3}>cc</option>
            <option value={4}>dd</option>
      </select>
      <p>selter{selter}</p>
      <label >
          <input type='radio' value='早饭'
            checked={shipping=='早饭'}
            onChange={changeShipping}
          />
          凄凄切切
      </label>
      <label >
          <input type='radio' value='午饭'
           checked={shipping=='午饭'}
            onChange={changeShipping}
          />
          2222
      </label>
      <label >
          <input type='radio' value='晚饭'
           checked={shipping=='晚饭'}
            onChange={changeShipping}
          />
          3333
      </label>
    </div>
  );
}
export default TestComponent;
